<template>
	<div>
		<el-form ref="form" :model="form" :rules="rules" label-width="80px">
			<el-row>
				<el-col :span="10">
					<el-form-item label="姓名" prop="customerName">
						<el-input v-model="form.customerName"></el-input>
					</el-form-item>
				</el-col>

				<el-col :span="12">
					<el-form-item label="性别" prop="customerGender" label-width="130px">
						<el-select v-model="form.customerGender" placeholder="请选择..">
							<el-option v-for="item in options" :key="item.value" :label="item.label"
								:value="item.value">
							</el-option>
						</el-select>
					</el-form-item>
				</el-col>
			</el-row>

			<el-row>
				<el-col :span="10">
					<el-form-item label="年龄" prop="customerAge">
						<el-input v-model="form.customerAge"></el-input>
					</el-form-item>
				</el-col>

				<el-col :span="12">
					<el-form-item label="档案编号" prop="recordId" label-width="130px">
						<el-input v-model="form.recordId"></el-input>
					</el-form-item>
				</el-col>
			</el-row>

			<el-row>
				<el-col :span="10">
					<el-form-item label="外出原因" prop="outgoingCause">
						<el-input v-model="form.outgoingCause"></el-input>
					</el-form-item>
				</el-col>

				<el-col :span="12">
					<el-form-item label="外出时间" prop="outgoingDate" label-width="130px">
						<el-date-picker v-model="form.outgoingDate" value-format="yyyy-MM-dd HH:mm:ss" type="datetime" placeholder="选择日期时间">
						</el-date-picker>
					</el-form-item>
				</el-col>
			</el-row>

			<el-row>
				<el-col :span="10">
					<el-form-item label="预计回来时间" prop="expectedReturnDate" label-width="110px">
						<el-date-picker v-model="form.expectedReturnDate" value-format="yyyy-MM-dd HH:mm:ss" type="datetime" placeholder="选择日期时间">
						</el-date-picker>
					</el-form-item>
				</el-col>

				<el-col :span="12">
					<el-form-item label="实际回来时间" prop="actualReturnDate" label-width="140px">
						<el-date-picker v-model="form.actualReturnDate" value-format="yyyy-MM-dd HH:mm:ss" type="datetime" placeholder="选择日期时间">
						</el-date-picker>
					</el-form-item>
				</el-col>
			</el-row>


			<el-row>
				<el-col :span="10">
					<el-form-item label="陪同人">
						<el-input v-model="form.accompaniedPerson"></el-input>
					</el-form-item>
				</el-col>

				<el-col :span="12">
					<el-form-item label="与老人关系" label-width="140px">
						<el-input v-model="form.relation"></el-input>
					</el-form-item>
				</el-col>
			</el-row>

			<el-row>
				<el-col :span="10">
					<el-form-item label="陪同人电话" label-width="110px">
						<el-input v-model="form.accTelephone"></el-input>
					</el-form-item>
				</el-col>

				<el-col :span="12">
					<el-form-item label="审批状态" prop="status" label-width="140px">
						<el-input v-model="form.status"></el-input>
					</el-form-item>
				</el-col>
			</el-row>


			<el-row>
				<el-col :span="10">
					<el-form-item label="审批人" prop="auditPerson">
						<el-input v-model="form.auditPerson"></el-input>
					</el-form-item>
				</el-col>

				<el-col :span="12">
					<el-form-item label="审批时间"  prop="auditDate" label-width="140px">
						<el-date-picker v-model="form.auditDate" value-format="yyyy-MM-dd HH:mm:ss" type="datetime" placeholder="选择日期时间">
						</el-date-picker>
					</el-form-item>
				</el-col>
			</el-row>

			<el-form-item>
				<el-button type="primary" plain @click="save">保存数据</el-button>
			</el-form-item>
		</el-form>
	</div>
</template>

<script>
	import axios from '@/utils/axiosutils.js';
	export default {
		name: 'OutAdd',
		props: ['editid'],
		components: {},
		data() {
			return {
				form: {
					customerName: '',
					customerGender: '',
					customerAge: '',
					recordId: '',
					outgoingCause: '',
					outgoingDate: '',
					expectedReturnDate: '',
					actualReturnDate: '',
					accompaniedPerson: '',
					relation: '',
					accTelephone: '',
					status: '',
					auditPerson: '',
					auditDate: ''
				},
				rules: {
					customerName: [{
						required: true,
						message: '请输入',
						trigger: 'blur'
					}],
					customerGender: [{
						required: true,
						message: '请输入',
						trigger: 'blur'
					}],
					customerAge: [{
						required: true,
						message: '请输入',
						trigger: 'blur'
					}],
					recordId: [{
						required: true,
						message: '请输入',
						trigger: 'blur'
					}],
					outgoingCause: [{
						required: true,
						message: '请输入',
						trigger: 'blur'
					}],
					outgoingDate: [{
						required: true,
						message: '请输入',
						trigger: 'blur'
					}],
					expectedReturnDate: [{
						required: true,
						message: '请输入',
						trigger: 'blur'
					}],
					actualReturnDate: [{
						required: true,
						message: '请输入',
						trigger: 'blur'
					}],
					status: [{
						required: true,
						message: '请输入',
						trigger: 'blur'
					}],
					auditPerson: [{
						required: true,
						message: '请输入',
						trigger: 'blur'
					}],
					auditDate: [{
						required: true,
						message: '请输入',
						trigger: 'blur'
					}]
				},
				isupdate: false,
				options: [{
					value: '男',
					label: '男'
				}, {
					value: '女',
					label: '女'
				}]
			};
		},
		created() {
			if (this.editid) {
				// 如果是修改 用户名输入框禁用
				this.isupdate = true;
				axios.get(
					'/outgoing/getById',
					response => {
						this.form.outgoingId = this.editid;
						this.form.customerName = response.obj.customerName;
						this.form.customerGender = response.obj.customerGender;
						this.form.customerAge = response.obj.customerAge;
						this.form.recordId = response.obj.recordId;
						this.form.outgoingCause = response.obj.outgoingCause;
						this.form.outgoingDate = response.obj.outgoingDate;
						this.form.expectedReturnDate = response.obj.expectedReturnDate;
						this.form.actualReturnDate = response.obj.actualReturnDate;
						this.form.accompaniedPerson = response.obj.accompaniedPerson;
						this.form.relation = response.obj.relation;
						this.form.accTelephone = response.obj.accTelephone;
						this.form.status = response.obj.status;
						this.form.auditPerson = response.obj.auditPerson;
						this.form.auditDate = response.obj.auditDate;
					}, {
						outgoingId: this.editid
					}
				);
			}
		},
		methods: {
			save: function() {
				axios.post(
					'/outgoing/add',
					resp => {
						this.$emit('update:show', false);
						this.$emit('getData');
					},
					this.form
				);
			}
		}
	};
</script>

<style scoped>
	.el-row {
		height: 60px;
	}
</style>
